<template>
  <div class="all">
    <div class="search">
      <a class="back" @click="handelclick"><i class="iconfont">&#xe65d;</i></a>
      <van-search
        show-action
        placeholder="请输入搜索关键词"
        @keyup.enter="search"
        v-model="productName"
        input-align="center"
      >
        <template #action>
          <div @click="handleSerch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="Card">
      <div>
        <div class="cardlist" v-for="item in SerList" :key="item.id">
          <div class="cradimg">
            <img :src="imgs + item.iconImg" alt="" lazy="loaded" />
          </div>
          <div class="cradcont">
            <div class="title van-multi-ellipsis--l2">
              {{ item.name }}
            </div>
            <div class="subTitle van-multi-ellipsis--l2">
              {{ item.subName }}
            </div>
            <div class="moneys">
              <div class="money"><span>￥</span>{{ item.nowPrice }}</div>
              <div class="num">
                {{ item.virtualSalesCount }}<span>人付款</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-empty v-if="!SerList.length" description="暂无数据" />
    </div>
  </div>
</template>

<script>
import request from "../utils/request.js";
export default {
  data() {
    return {
      value: "",
      SerList: [],
      pageNo: 1,
      productName: "",
      ListShow: false,
      all: "",
      loading: true,
      n: 0,
      imgs: "https://caiba-produce.oss-cn-beijing.aliyuncs.com//",
    };
  },
  methods: {
    f1(e) {
      let top = e.srcElement.scrollTop;
      let scrollTop = top;
      let height = 1580;
      let div = document.getElementsByClassName("Card")[0];
      let hei1 = div.offsetHeight;
      let hei = height * this.n;
      if (scrollTop >= hei - 667 && scrollTop >= hei1 - 667) {
        this.n += 1;
        this.pageNo += 1;
        let url = `/gct/web/front/product/list?pageSize=10&pageNo=${this.pageNo}`;
        var data = { productName: `${this.productName}` };
        request({
          method: "POST",
          url,
          headers: { "Content-Type": "application/json" },
          data: data,
        }).then((res) => {
          let arr = res.data.data.couponProducts;
          arr.forEach((val) => {
            this.SerList.push(val.product);
          });
        });
      }
    },
    handelclick() {
      this.$router.push("/");
      window.removeEventListener("scroll", this.f1, true);
    },
    handleSerch() {
      let url = `/gct/web/front/product/list?pageSize=10&pageNo=${this.pageNo}`;
      var data = { productName: `${this.productName}` };
      request({
        method: "POST",
        url,
        headers: { "Content-Type": "application/json" },
        data: data,
      }).then((res) => {
        let arr = res.data.data.couponProducts.slice(this.pageNo);
        arr.forEach((val) => {
          this.SerList.push(val.product);
        });
      });
    },
  },
  mounted() {
    window.addEventListener("scroll", this.f1, true);
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/search.css");
@import url("../assets/css/reset.css");
@import url("../assets/font/iconfont.css");
</style>